<!-- 搜索的音乐 -->
<template>
    <loading v-if="SearchList.length == 0" class="absolute top-2/3 left-1/2 translate-x-[-50%] translate-y-[-50%]">
    </loading>
    <div v-else class="w-full">
        <!-- 标题 -->
        <div class="h-32 rounded-lg">
            <h1 class="text-2xl text-[var(--text)] font-bold">搜索&nbsp;&nbsp;{{ route.query.name }}</h1>
            <div class="flex mt-4">
                <div
                    class="h-20 rounded-lg w-80 mr-5 flex items-center px-3 bg-[var(--inputBg)] hover:bg-[var(--active)] hover:cursor-pointer">
                    <div class="flex">
                        <img class="rounded-full max-w-[3rem] mr-4" :src="singerInfo?.artist.avatar" alt="">
                        <div>
                            <p class="text-[var(--text)] font-bold max-w-[14rem] line-clamp-1">歌手：{{
                                singerInfo?.artist.name }}</p>
                            <p class="text-[var(--iconBg)] text-xs mt-1 max-w-[14rem] line-clamp-1">粉丝：535万，歌曲：193</p>
                        </div>
                    </div>
                </div>
                <div
                    class="h-20 rounded-lg w-80 flex items-center px-3 bg-[var(--inputBg)] hover:bg-[var(--active)] hover:cursor-pointer">
                    <div class="flex" v-for="item in artistAlbumList.slice(0, 1)" :key="item.id">
                        <img class="rounded-md min-w-[3rem] min-h-[3rem] mr-4" :src="item.picUrl" alt="">
                        <div>
                            <p class="text-[var(--text)] font-bold w-[14rem] line-clamp-1">{{ item.type
                                + '：' + item.name }}</p>
                            <p class="text-[var(--iconBg)] text-xs mt-1 w-[14rem] line-clamp-1">{{
                                item.company }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 导航栏 -->
        <nav class="mt-8 mb-3 flex justify-between items-end">
            <ul class="w-fit flex rounded-full bg-[var(--inputBg)] justify-between">
                <li
                    class=" bg-[var(--active)] hover:bg-[var(--active)] transition-all hover:cursor-pointer rounded-full px-3 py-1 m-1 text-[var(--text)] text-lg">
                    单曲</li>
                <li
                    class=" hover:bg-[var(--active)] transition-all hover:cursor-pointer rounded-full px-3 py-1 m-1 text-[var(--text)] text-lg">
                    歌手</li>
                <li
                    class=" hover:bg-[var(--active)] transition-all hover:cursor-pointer rounded-full px-3 py-1 m-1 text-[var(--text)] text-lg">
                    专辑</li>
                <li
                    class=" hover:bg-[var(--active)] transition-all hover:cursor-pointer rounded-full px-3 py-1 m-1 text-[var(--text)] text-lg">
                    视频</li>
                <li
                    class=" hover:bg-[var(--active)] transition-all hover:cursor-pointer rounded-full px-3 py-1 m-1 text-[var(--text)] text-lg">
                    歌单</li>
                <li
                    class=" hover:bg-[var(--active)] transition-all hover:cursor-pointer rounded-full px-3 py-1 m-1 text-[var(--text)] text-lg">
                    歌词</li>
                <li
                    class=" hover:bg-[var(--active)] transition-all hover:cursor-pointer rounded-full px-3 py-1 m-1 text-[var(--text)] text-lg">
                    播客</li>
                <li
                    class=" hover:bg-[var(--active)] transition-all hover:cursor-pointer rounded-full px-3 py-1 m-1 text-[var(--text)] text-lg">
                    声音</li>
                <li
                    class=" hover:bg-[var(--active)] transition-all hover:cursor-pointer rounded-full px-3 py-1 m-1 text-[var(--text)] text-lg">
                    用户</li>
            </ul>
            <span class="text-[var(--iconBg)] text-sm">找到 {{ songCount }} 首单曲</span>
        </nav>
        <!-- 菜单栏 -->
        <div class="w-full flex items-center">
            <div class="relative">
                <i
                    class="iconfont icon-bofang before:text-[60px] text-[var(--playBg)] rounded-full hover:cursor-pointer duration-300"></i>
                <i class="iconfont icon-jiarugedan before:text-2xl text-[var(--playBg)] absolute bottom-[32%] ml-6"></i>
            </div>
            <div class="flex ml-16">
                <div
                    class="flex items-center border border-[var(--playBg)] hover:cursor-pointer hover:bg-[var(--playBg)] duration-300 hover:border-transparent hover:text-[var(--contentBg)] text-[var(--playBg)] rounded-full px-3 py-1">
                    <i class="iconfont icon-xiazai before:text-lg mr-1"></i>
                    <span class="text-sm">下载全部</span>
                </div>
            </div>

        </div>
        <SongList :songList="SearchList" :slider="true" />
    </div>
</template>

<script setup lang='ts'>
import { watch } from 'vue'
import { useStore } from '@renderer/store/index'
import { storeToRefs } from 'pinia'
import { useRoute } from 'vue-router'
const route = useRoute()
const { keyWordSearch, singerDetail, artistAlbum } = useStore()
const { SearchList, songCount } = storeToRefs(keyWordSearch)
const { singerInfo } = storeToRefs(singerDetail)
const { artistAlbumList } = storeToRefs(artistAlbum)
watch(() => route.query.name, async (newValue, oldValue) => {
    let newKeyWords = newValue
    let oldKeyWords = oldValue
    if (!newKeyWords) {
        newKeyWords = oldKeyWords as string
    }
    SearchList.value = []
    await keyWordSearch.getSearchList(newKeyWords as string).then(async () => {
        await singerDetail.getSingerDetail(SearchList.value[0]?.ar[0].id).then(async () => {
            await artistAlbum.getArtistAlbum(SearchList.value[0]?.ar[0].id)
        })
    })
}, {
    immediate: true
})
</script>